Ext.define('Sh.ux.ColorField', {
    extend:'Ext.form.field.Picker',
    alias:'widget.colorfield',
    requires:['Ext.picker.Color'],
    triggerCls:'x-form-color-trigger',
    createPicker:function () {
        var me = this;
        return Ext.create('Ext.picker.Color', {
            pickerField:me,
            renderTo:document.body,
            floating:true,
            hidden:true,
            focusOnShow:true,
            listeners:{
                select:function (picker, selColor) {
                    me.setValue('#'+selColor);
                    var r = parseInt(selColor.substring(0,2),16);
                    var g = parseInt(selColor.substring(2,4),16);
                    var b = parseInt(selColor.substring(4,6),16);
                    var a = new Ext.draw.Color(r,g,b);
                    var l = a.getHSL()[2];                  
                    if (l > 0.5) {
                        me.setFieldStyle('background:#' + selColor + ';color:#000000');
                    }
                    else{
                        me.setFieldStyle('background:#' + selColor + ';color:#FFFFFF');
                    }
                }
            }
        });
    }
});